<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>{{ username }}</h4>
    <h4>{{ password }}</h4>
    <!-- v-model用在html标签上 -->
    <!-- <input type="text" v-model="username">
    <input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target).value"> -->

      <!-- v-model用在组件标签上 -->
    <!-- <AtguiguInput 
    :ming="username" @update:ming="username = $event"
    :mima="password" @update:mima="password = $event"
    /> -->

    <AtguiguInput v-model:ming="username" v-model:mima="password"/>
  </div>
</template>

<script setup lang="ts" name="Father">
import { ref } from "vue";
import AtguiguInput from './AtguiguInput.vue'
// 数据
let username = ref('zhansgan')
let password = ref('123456')
// defineProps(['ming', 'mima'])
// const emit = defineEmits(['update:ming', 'update:mima'])

/**
 1. 概述：实现 **父↔子** 之间相互通信。
2. 前序知识 —— `v-model`的本质
<!-- 使用v-model指令 -->
<input type="text" v-model="userName">

<!-- v-model的本质是下面这行代码 -->
<input 
  type="text" 
  :value="userName" 
  @input="userName =(<HTMLInputElement>$event.target).value"
>
3. 组件标签上的`v-model`的本质：`:moldeValue` ＋ `update:modelValue`事件。
3. 组件标签上的`v-model`的本质：`:moldeValue` ＋ `update:modelValue`事件。
3. 组件标签上的`v-model`的本质：`:moldeValue` ＋ `update:modelValue`事件。
<!-- 组件标签上使用v-model指令 -->
<AtguiguInput v-model="userName"/>

<!-- 组件标签上v-model的本质 -->
<AtguiguInput :modelValue="userName" @update:model-value="userName = $event"/>
`AtguiguInput`组件中：
<template>
  <div class="box">
    <!--将接收的value值赋给input元素的value属性，目的是：为了呈现数据 -->
		<!--给input元素绑定原生input事件，触发input事件时，进而触发update:model-value事件-->
    <input 
       type="text" 
       :value="modelValue" 
       @input="emit('update:model-value',$event.target.value)"
    >
  </div>
</template>


 */
</script>

<style scoped>
.father {
  padding: 20px;
  background-color: rgb(165, 164, 164);
  border-radius: 10px;
}
</style>
